<template>
  <div class="home-container">
    <el-row :gutter="20">
      <!-- 卡片统计：今日用例数、通过率、失败数 -->
      <el-col :span="8">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-item">
            <div class="stat-value">{{ caseCount }}</div>
            <div class="stat-label">今日用例数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card success" shadow="hover">
          <div class="stat-item">
            <div class="stat-value">{{ successRate }}%</div>
            <div class="stat-label">通过率</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card error" shadow="hover">
          <div class="stat-item">
            <div class="stat-value">{{ failCount }}</div>
            <div class="stat-label">失败用例数</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷入口 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="6">
        <el-card class="menu-card" @click="goTo('/case-manage')" shadow="hover">
          <el-icon class="menu-icon"><Grid /></el-icon>
          <div class="menu-label">用例管理</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="menu-card" @click="goTo('/report-center')" shadow="hover">
          <el-icon class="menu-icon"><Document /></el-icon>
          <div class="menu-label">报告中心</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="menu-card" shadow="hover">
          <el-icon class="menu-icon"><DataLine /></el-icon>
          <div class="menu-label">数据管理</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="menu-card" shadow="hover">
          <el-icon class="menu-icon"><Tickets /></el-icon>
          <div class="menu-label">执行日志</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表：用例通过率趋势 -->
    <el-card style="margin-top: 20px">
      <h3>近7天用例通过率趋势</h3>
      <div ref="chartRef" class="chart-container" style="height: 300px"></div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElCard, ElRow, ElCol, ElIcon } from 'element-plus'
import { Grid, Document, DataLine, Tickets } from '@element-plus/icons-vue'
import * as echarts from 'echarts' // 引入ECharts做图表

const router = useRouter()
const chartRef = ref(null)
const caseCount = ref(120) // 模拟数据，后续对接Django接口
const successRate = ref(85)
const failCount = ref(18)

// 跳转页面
const goTo = (path) => {
  router.push(path)
}

// 初始化图表
onMounted(() => {
  const chart = echarts.init(chartRef.value)
  chart.setOption({
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value',
      max: 100
    },
    series: [{
      data: [80, 82, 88, 85, 90, 87, 85],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#4361ee'
      }
    }]
  })
})
</script>

<style scoped lang="scss">
.home-container {
  padding: 20px;
}

.stat-card {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  .stat-item {
    text-align: center;
    .stat-value {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .stat-label {
      font-size: 14px;
      color: #666;
    }
  }
  &.success {
    .stat-value {
      color: #67c23a;
    }
  }
  &.error {
    .stat-value {
      color: #f56c6c;
    }
  }
}

.menu-card {
  height: 100px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  .menu-icon {
    font-size: 24px;
    margin-bottom: 10px;
    color: #4361ee;
  }
  .menu-label {
    font-size: 16px;
  }
}

.chart-container {
  width: 100%;
}
</style>